<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath }"/>
<link rel="stylesheet" href="${ctx }/resources/js/select2/select2.min.css"/>
<script type="text/javascript" src="${ctx }/resources/js/select2/select2.min.js"></script>
<script type="text/javascript" src="${ctx }/resources/js/select2/zh-CN.js"></script>

<div class="page-header">
    <h1>
        <c:if test="${empty userEntity}">
            新增用户
        </c:if>
        <c:if test="${!empty userEntity}">
            编辑用户
        </c:if>
    </h1>
</div>
<div class="row" style="margin-top:5px;">
    <div class="col-xs-12">
        <form id="userForm" name="userForm" class="form-horizontal" role="form" method="post">
            <c:if test="${!empty userEntity}">
                <input type="hidden" id="pageNum" name="pageNum" value="${page.pageNum }">
                <input type="hidden" id="pageSize" name="pageSize" value="${page.pageSize }">
                <input type="hidden" id="orderByColumn" name="orderByColumn" value="${page.orderByColumn }">
                <input type="hidden" id="orderByType" name="orderByType" value="${page.orderByType }">
                <input type="hidden" name="id" id="userId" value="${userEntity.id }">
                <input type="hidden" name="userInfo.id" value="${userEntity.id }">
            </c:if>
            <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right" for="accountName">邮箱</label>
                <div class="col-sm-10">
                    <div class="clearfix">
                        <input
                                <c:if test="${!empty userEntity}">readonly</c:if> class="form-control"
                                name="accountName" id="accountName" type="email"
                                value="${userEntity.accountName }" placeholder="邮箱,将做为用户登录系统的账户..."/>
                    </div>
                </div>
            </div>
            <c:if test="${empty userEntity}">
                <div class="form-group">
                    <label class="control-label col-sm-1 no-padding-right" for="password">密码</label>
                    <div class="col-sm-10">
                        <div class="clearfix">
                            <input class="form-control" name="password" id="password" type="password"
                                   placeholder="密码..."/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-1 no-padding-right" for="repassword">确认密码</label>
                    <div class="col-sm-10">
                        <div class="clearfix">
                            <input class="form-control" name="repassword" id="repassword" type="password"
                                   placeholder="确认密码..."/>
                        </div>
                    </div>
                </div>
            </c:if>
            <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right" for="userName">真实姓名</label>
                <div class="col-sm-10">
                    <div class="clearfix">
                        <input class="form-control" name="userName" id="userName" type="text"
                               value="${userEntity.userName }" placeholder="真实姓名..."/>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right" for="roleId">所属角色</label>
                <div class="col-sm-10">
                    <div class="clearfix">
                        <select
                                <c:if test="${userSession.role.name eq '超级管理员'}">readonly</c:if> class="form-control"
                                name="role.id" id="roleId" style="width: 100%">
                            <option value=""></option>
                            <c:choose>
                                <c:when test="${!empty userEntity}">
                                    <c:forEach var="role" items="${roleList }">
                                        <c:choose>
                                            <c:when test="${userSession.role.name eq '超级管理员'}">
                                                <c:if test="${role.name ne '超级管理员'}">
                                                    <option value="${role.id }"
                                                            <c:if test="${userEntity.role.id eq role.id}">selected="selected"</c:if>>${role.name }</option>
                                                </c:if>
                                            </c:when>
                                            <c:when test="${userSession.role.name eq '管理员'}">
                                                <c:if test="${role.name ne '超级管理员' && role.name ne '管理员'}">
                                                    <option value="${role.id }"
                                                            <c:if test="${userEntity.role.id eq role.id}">selected="selected"</c:if>>${role.name }</option>
                                                </c:if>
                                            </c:when>
                                            <c:otherwise>
                                                <option value="${role.id }"
                                                        <c:if test="${userEntity.role.id eq role.id}">selected="selected"</c:if>>${role.name }</option>
                                            </c:otherwise>
                                        </c:choose>
                                    </c:forEach>
                                </c:when>
                                <c:otherwise>
                                    <c:forEach var="role" items="${roleList }">
                                        <c:choose>
                                            <c:when test="${userSession.role.name eq '超级管理员'}">
                                                <c:if test="${role.name ne '超级管理员'}">
                                                    <option value="${role.id }">${role.name }</option>
                                                </c:if>
                                            </c:when>
                                            <c:when test="${userSession.role.name eq '管理员'}">
                                                <c:if test="${role.name ne '超级管理员' && role.name ne '管理员'}">
                                                    <option value="${role.id }">${role.name }</option>
                                                </c:if>
                                            </c:when>
                                            <c:otherwise>
                                                <option value="${role.id }">${role.name }</option>
                                            </c:otherwise>
                                        </c:choose>
                                    </c:forEach>
                                </c:otherwise>
                            </c:choose>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-1 no-padding-right" for="description">用户描述</label>
                <div class="col-sm-10">
                    <div class="clearfix">
                        <input class="form-control" name="description" id="description" type="text"
                               value="${userEntity.description }" placeholder="用户描述..."/>
                    </div>
                </div>
            </div>
        </form>
        <div class="hr hr-dotted"></div>
    </div>
</div>
<div class="center">
    <button id="btnAdd" type="button" class="btn btn-success btn-sm">
        <i class="fa fa-user-plus"></i>&nbsp;
        <c:if test="${empty userEntity}">
            添加
        </c:if>
        <c:if test="${!empty userEntity}">
            保存
        </c:if>
    </button>
    <button id="btnBack" type="button" class="btn btn-info btn-sm">
        <i class="fa fa-undo"></i>&nbsp;返回
    </button>
</div>
<script type="text/javascript">
    $(function () {
        initButtonClick();
        validateUserForm();
    });

    /**
     *  初始化绑定按钮事件
     */
    function initButtonClick() {
        $("#btnAdd").click(function () {
            $('#userForm').submit();
        });


        $("#btnBack").click(function () {
            movic.common.loadPage('/user/listUI.html<c:if test="${!empty userEntity}">?page=${page.pageNum }&rows=${page.pageSize }&sidx=${page.orderByColumn }&sord=${page.orderByType }</c:if>')
        });
    }

    /**
     * 初始化验证表达
     */
    function validateUserForm() {
        $('#userForm').validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: false,
            ignore: "",
            rules: {
                accountName: {
                    required: true,
                    email: true,
                    remote: {//更新时不验证
                        param: {
                            url: sys.rootPath + '/user/withoutAuth/validateAccountName.html',
                            cache: false
                        },
                        depends: function () {
                            return typeof ($("#userId").val()) === "undefined";
                        }
                    }
                },
                password: {
                    required: true,
                    minlength: 6
                },
                repassword: {
                    required: true,
                    minlength: 6,
                    equalTo: "#password"
                },
                userName: {
                    required: true
                },
                "role.id": {
                    required: true
                }
            },
            messages: {
                accountName: {
                    required: "请填写邮箱",
                    email: "请填写正确的邮箱",
                    remote: "该邮箱已注册,请使用其他邮箱"
                },
                password: {
                    required: "请填写密码",
                    minlength: "密码长度不能少于6个字符"
                },
                repassword: {
                    required: "请再次填写密码",
                    minlength: "密码长度不能少于6个字符",
                    equalTo: "两次填写密码不一致，请重新填写"
                },
                userName: "请填写真实姓名",
                "role.id": "请选择角色"
            },
            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
            },
            success: function (e) {
                $(e).closest('.form-group').removeClass('has-error').addClass('has-success');
                $(e).remove();
            },
            errorPlacement: function (error, element) {
                if (element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                    var controls = element.closest('div[class*="col-"]');
                    if (controls.find(':checkbox,:radio').length > 1)
                        controls.append(error);
                    else
                        error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                } else if (element.is('.select2')) {
                    error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                } else if (element.is('.chosen-select')) {
                    error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                } else
                    error.insertAfter(element.parent());
            },
            submitHandler: function (form) {
                var userId = $("#userId").val();
                var url = "";
                if (userId !== undefined) {
                    url = '/user/edit.html';
                } else {
                    url = '/user/add.html';
                }
                movic.common.commit('userForm', url, '/user/listUI.html');
            }
        });
    }
</script>